import React from 'react';
import ReactDOM from 'react-dom';
// 导入样式
import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';

// 引入图片 => require('path')
// import img from './assets/img/house.png'

// // 导入函数组件
// import Fnc from './组件创建/函数组件';
// // 导入类组件
// import Comp, { abc } from './组件创建/类组件';

// console.log(img, require('./assets/img/house.png'), abc)

import Index from './性能优化/index.jsx';




// //  创建react元素
// const span = React.createElement('span', null, 'span')
// const p = React.createElement('p', null, 'p标签', span)
// const h1 = React.createElement('h1', { className: 'test', id: 'hh' }, 'hello react!', 1000);
// const div = React.createElement('div', { id: 'div' }, h1, 100, 'hello!', p)

// // 用jsx创建react元素
// const ul = <div><ul><li><span>hello jsx!</span></li><li><p>100</p></li></ul></div>

// // 使用jsx注意事项
// // 小驼峰：第一个单词首字母小写，从第二个单词及以后的首字母是大写开头
// // 大驼峰

// // 单大括号中可以使用任意的 JavaScript 表达式 （值，变量，函数调用，三元运算符，数组(基本类型，jsx)）
// // 不能写对象
// let a = 'hello jsx 绑定数据';
// let num = 100;

// function getVal() {
//   return '你好！'
// }

// let b = { a: 10 };
// const div2 = (
//   // 只能有一个根（父元素）
//   // 语法糖：React.createElement()
//   <div className="abc">
//     <h1>
//       1000
//   </h1>
//     <p>{a}</p>
//     <p>{num}</p>
//     <p>{100}</p>
//     <p>{'你好👋'}</p>
//     <ul>
//       <li>{getVal()}</li>
//       <li>{false ? 1 : 2}</li>
//       <li>{[1, 2, 3, '你好！']}</li>
//       <li>{<span>10000</span>}</li>
//       <li>{b.a}</li>
//     </ul>
//   </div>
// )

// // 条件渲染
// // 1. 三元表达式
// // 2. 函数调用
// let fnload = (loading) => {
//   if (loading) {
//     return <span>loading...</span>
//   }
//   return 'loaded!'
// }
// // 加载中
// let loading = true;
// const load = (
//   <div id="id1">
//     <p>
//       <img src={img} />
//       <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589814344387&di=8051f18fb92a865ff2d50f7778a09bb9&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg" />
//     </p>
//     <h1>{loading ? <span>数据加载中...</span> : '加载完成！'}</h1>
//     <h2>{fnload()}</h2>
//     <ul>
//       <li>{[<p key="1">1</p>, <p key="2">2</p>]}</li>
//     </ul>
//   </div>
// )

// console.log('react元素', load, React.createElement('div', { className: 'ts' }, 123))

// // 列表渲染
// const songs = [
//   { id: 1, name: '野狼disco' },
//   { id: 2, name: '像我这样的人' },
//   { id: 3, name: '桥边姑娘' },
// ]

// const lis = (
//   <ul>
//     {
//       songs.map((item) => <li style={{ background: 'red', color: '#fff', fontSize: '24px' }} key={item.id}>{item.name}</li>)
//       // [<li>1</li>, <li>2</li>]
//     }
//   </ul>
// )

// const div3 = (
//   <div className="ts" id="tc" style={{ color: 'orange' }}>
//     <h1>123</h1>
//   </div>
// )

// // 函数组件
// // ##### 语法

// // - 函数组件：使用 JS 的函数（或箭头函数）创建的组件 
// //   - 函数体内要返回元素（jsx）
// // - 渲染函数组件：用函数名作为**组件标签名** (大驼峰)

// function Com() {
//   let a = 10
//   return (
//     <div>
//       <h1>我是函数组件</h1>
//       <p>{a}</p>
//     </div>
//   )
// }

// // 相当于根组件
// let FnCom = () => {
//   return (
//     <div>
//       {/* 子组件： Com */}
//       <Com />
//       <h3>我是箭头函数=》函数组件</h3>
//     </div>
//   )
// }

// // 类组件创建
// // ##### 语法

// // - 类组件：使用 **ES6 的 class关键字** 创建的组件 
// // - 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法和属性

// class ClaCom extends React.Component {

//   // template
//   render() {
//     return (
//       <div>
//         <h1>我是类组件</h1>
//         <hr />
//         {/* 渲染子组件 */}
//         <FnCom />
//       </div>
//     )
//   }
// }


ReactDOM.render(
  <Index />,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
